﻿<template>
    <div class="header">
        <el-button type="primary" @click="pageUp">上一页</el-button>
        <el-button type="primary" style="margin-left: 20px" @click="pageDown">下一页</el-button>

        <div style="margin-left: 20px">
            <span>{{ pageInfo.current }}</span>
            <span>/</span>
            <span>{{ pageInfo.total }}</span>
        </div>

        <el-button type="warning" style="margin-left: 20px" @click="onDownload">下载</el-button>
    </div>
</template>

<script setup>
const { pageInfo } = defineProps({
    pageInfo: {
        type: Object,
    },
});

const $emits = defineEmits(['onDownload', 'pageChange']);

const onDownload = () => {
    $emits('onDownload');
};

// 上一页
const pageUp = () => {
    if (pageInfo.current == 1) return;
    $emits('pageChange', --pageInfo.current);
};

// 下一页
const pageDown = () => {
    if (pageInfo.current == pageInfo.total) return;
    $emits('pageChange', ++pageInfo.current);
};
</script>

<style scoped lang="scss">
.header {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
